<template>
  <div>
    <!-- 按条件搜索框-->
    <!-- :model="selectOrder" -->
            <!-- :rules="rules" -->
    <el-form :inline="true" class="demo-form-inline"
        
        :data="selectOrder"

        label-width="100px"
        ref="selectOrder"
    >
      <el-form-item label="信息来源">
        <el-input v-model="selectOrder.source"></el-input>
      </el-form-item>
      <el-form-item label="事件等级">
        <el-select v-model="selectOrder.eventId" placeholder="请选择">
          <el-option
              v-for="event in events"
              :label="event.name"
              :value="event.id"
              :key="event.id"
            >
            </el-option>
        
        </el-select>
      </el-form-item>
      <el-form-item label="反应人">
        <el-input v-model="selectOrder.reflectPeople"></el-input>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="selectOrder.phone"></el-input>
      </el-form-item>
      <el-form-item label="反应单位">
        <el-input v-model="selectOrder.reflectUnit"></el-input>
      </el-form-item>
      <el-form-item label="反应区域">
        <el-input v-model="selectOrder.reflectArea"></el-input>
      </el-form-item>
      <el-form-item label="发生时间" >
        <el-date-picker
          v-model="selectOrder.happenDate"
          type="datetime"
          placeholder="Select date and time"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="发生地点">
        <el-input v-model="selectOrder.happenArea"></el-input>
      </el-form-item>
      <el-form-item label="截止时间">
        <el-date-picker
          v-model="selectOrder.endDate"
          type="datetime"
          placeholder="Select date and time"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">导出数据</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格-->
    <template>
      <el-table :data="repairData" style="width: 100%" max-height="1000" stripe border>
        <el-table-column fixed  type="index" label="编号" width="120">
            <template slot-scope="scope">
              <span>
                {{ scope.$index + (selectOrder.pageIndex - 1) * 3 + 1 }}
              </span>
        </template>
        </el-table-column>
        <!-- <el-table-column prop="id" label="编号" width="120"> </el-table-column> -->
        <el-table-column prop="source" label="信息来源" width="120">
        </el-table-column>
        <el-table-column prop="reflectClass" label="反应类别" width="120">
        </el-table-column>
        <el-table-column prop="reflectPeople" label="反应人" width="120">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" width="120">
        </el-table-column>
        <el-table-column prop="email" label="电子邮件" width="150">
        </el-table-column>
        <el-table-column prop="reflectUnit" label="反应单位" width="120">
        </el-table-column>
        <el-table-column prop="reflectArea" label="反应区域" width="120">
        </el-table-column>
        <el-table-column prop="happenDate" label="发生日期" width="200">
        </el-table-column>
        <el-table-column prop="endDate" label="截止日期" width="200">
        </el-table-column>
        <el-table-column prop="happenArea" label="发生地点" width="120">
        </el-table-column>
        <el-table-column prop="eventName" label="事件等级" width="120">
        </el-table-column>
        <el-table-column prop="userName" label="指派人" width="120">
        </el-table-column>
        <!-- <el-table-column prop="isFeedback" label="是否反馈" width="120">
        </el-table-column> -->
        <el-table-column prop="stateName" label="状态" width="120">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">

            <el-button
            @click.native.prevent='updateRow(scope.row.id)'
            type="primary"
            >
            去审核
            </el-button>
            <el-button
              @click.native.prevent="deleteRow(scope.row.id)"
              type="warning"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="3"
      @current-change="change"
    >
    </el-pagination>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
        selectOrder:{
            state:2,
             source:"",
              eventId:"",
              reflectPeople:"",
              phone:"",
              reflectUnit:"",
              reflectArea:"",
              pappenArea:"",
              pageIndex:'',
              happenDate:'',
              endDate:'',
        },
         pickerOptions1: {
          shortcuts: [{
            text: 'Today',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: 'Yesterday',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: 'A week ago',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        repairData:[],
        pageIndex:1,
        total:0,
        events:{},
        users:{}
      }
    },
     
  methods:{
    //按条件查询
    onSubmit(){
      this.getAll();
    },
     //修改当前页码
    change(currentPage) {
      this.pageIndex = currentPage;
       this.getAll();
    },
    //查询用户
    getAll(){
      this.selectOrder.pageIndex=this.pageIndex;
      console.log(this.selectOrder);
       this.axios.post("/worker/list",this.selectOrder,
      
       ).then(res=>{
         console.log(res.data.data);
         this.pageIndex=res.data.data.pageNum;
         this.total=res.data.data.total;
         this.repairData=res.data.data.list;
        //  this.pageIndex=
       })
    },
    //查询所有事件
    getAllEvent(){
        this.axios.get("/event/list").then(res=>{
            console.log(res);
            this.events=res.data.data;
        })
    },
    //查询所有角色
    getAllUsers(){
      this.axios.get("/user/repair").then(res=>{
         console.log(res);
         this.users=res.data.data;
      })
    },
    //删除用户
    deleteRow(id){
      this.$confirm("确认删除吗?","提示",{
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
      }).then(()=>{
                 this.axios.get("/repair/delete",{
         params:{
           id:id
         }
       }).then(res=>{
          if(res.data.code==200){
           this.getAll();
           this.$message({
             message:'删除成功',
             type:'success'
           })
         }
       })
      }).catch(()=>{
       
      })





    },
     reset(){
         this.selectOrder.source='';
         this.selectOrder.endDate='';
         this.selectOrder.eventId='';
         this.selectOrder.reflectPeople='';
         this.selectOrder.phone='';
         this.selectOrder.reflectUnit='';
         this.selectOrder.reflectArea='';
         this.selectOrder.pappenArea='';
         this.selectOrder.pageIndex='';
         this.selectOrder.happenDate='';
         this.getAll();
       },
       updateRow(id){
         this.axios.get("/repair/updateState",{
           params:{
            id:id,
            state:3
           }
         }).then(res=>{
           if(res.data.code==200){
             this.getAll();
             this.message({
               message:'操作成功',
               type:'success'
             })
           }else{
             this.$message({
               type:'erro',
               message:'出错了'
             })
             }
         })
       }
  },
  created(){
  this.getAllUsers();
  this.getAllEvent();
   this.getAll();
  }
};
</script>

<style>
</style>
